import React, { useEffect, useState } from 'react'
import style from './projectColumn.module.scss'
import { useDrop } from 'react-dnd'
import { IEmployee, IProjectToEmployeeLink, IProject } from '../../../starter/model/interfaces'
import CardEmployee from '../CardEmployee/CardEmployee'
import CardProject from '../CardProject/CardProject'
import { useAppSelector } from '../../../starter/hooks/redux'


type TProjectColumn = {
  project: IProject
  ProjectToEmployeeLinks: IProjectToEmployeeLink[]
  setLink: (link: IProjectToEmployeeLink) => void
}
export default function ProjectColumn({project, ProjectToEmployeeLinks, setLink}:TProjectColumn) {
  const [employees, setEmployees] = useState<IEmployee[]>([])

  const {employees: allEmployees} = useAppSelector(state => state.employees)

  useEffect(() => {
    setEmployees(ProjectToEmployeeLinks.map(item => item.employee))
  }, [ProjectToEmployeeLinks])
  const [{ isActive: isActiveEmployeeDrop }, projectLinkRef] = useDrop({
    accept: 'employee-small',
    drop(item: IProjectToEmployeeLink | IEmployee) {
      if (item.hasOwnProperty('project') && item.hasOwnProperty('periods')) {
        setLink(item as IProjectToEmployeeLink)
      } else {
        setLink({
          _id: '',
          employee: item as IEmployee,
          project: project,
          periods: []
        })
      }
    },
    collect: monitor => ({
      isActive: monitor.canDrop() && monitor.isOver(),
    })
  })
  const [{ isActive: isActiveProjectDrop }, projectRef] = useDrop({
    accept: 'project',
    drop(item: IProjectToEmployeeLink | IEmployee) {
      // if (item.hasOwnProperty('project') && item.hasOwnProperty('periods')) {
      //   setLink(item as IProjectToEmployeeLink)
      // } else {
      //   setLink({
      //     _id: '',
      //     employee: item as IEmployee,
      //     project: project,
      //     periods: []
      //   })
      // }
    },
    collect: monitor => ({
      isActive: monitor.canDrop() && monitor.isOver(),
    })
  })
  const dropStyle = {
    background: 'rgba(3,200,3,0.15)',
  }
  return (
    <div
      ref={projectRef}
      className={style.wrapper}
      style={isActiveEmployeeDrop || isActiveProjectDrop ? dropStyle : {}}
    >
      <CardProject key={project._id} project={project} isSmall={false} />
      <div className={style.employeeWrapper}
           ref={projectLinkRef}
           style={{
             gridTemplateRows: `repeat(${allEmployees && allEmployees.length}, 1fr)`
           }}
      >
        {
          ProjectToEmployeeLinks.map((linkItem, index) => {
            const stylePosition = {
              gridRowStart: allEmployees && allEmployees.findIndex(empl => empl._id === linkItem.employee._id) + 1,
              display: 'flex',
              justifyContent: 'center'
            }
            return (
              <div
                key={`${linkItem.project._id}/${linkItem.employee._id}`}
                className={style.cell}
                style={stylePosition}
              >
                <CardEmployee linkItem={linkItem} isSmall={false}/>
              </div>
            )
          })
        }
      </div>
    </div>

  )
}
